<template>
	<ele-modal :width="950" :visible="visible" :confirm-loading="loading" :title="'高级查询'"
		:body-style="{ paddingBottom: '8px' }" @update:visible="updateVisible" @ok="save">
		<a-form :label-col="{ md: { span: 2 }, sm: { span: 4 }, xs: { span: 24 } }"
			:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }">
			<a-row :gutter="24">
				<a-col :md="24" :sm="24" :xs="24">
					<table cellpadding="0" cellspacing="0" class="recepit_table2">
						<tr>
							<td class="tit">销售单号</td>
							<td>
								<a-input allow-clear placeholder="请输入" v-model:value="form.order_sn"
									autocomplete="off" />
							</td>
							<td class="tit">销售时间</td>
							<td>
								<a-range-picker valueFormat="YYYY/MM/DD" v-model:value="time" @calendarChange="change" />
							</td>
						</tr>
						<tr>
							<td class="tit">主销导购</td>
							<td>
								<a-select style="width:100%" optionFilterProp="label" :options="gouOptions" allow-clear placeholder="请选择"
									v-model:value="form.main_salesman_id" />
							</td>
							<td class="tit">辅销导购</td>
							<td>
								<a-select style="width:100%" optionFilterProp="label" :options="gouOptions" allow-clear placeholder="请选择"
									v-model:value="form.vice_salesman_id" />
							</td>
						</tr>
						<tr>
							<td class="tit">会员姓名</td>
							<td>
								<a-input allow-clear placeholder="请输入" v-model:value="form.name" autocomplete="off" />
							</td>
							<td class="tit">会员手机</td>
							<td>
								<a-input allow-clear placeholder="请输入" v-model:value="form.mobile" autocomplete="off" />
							</td>
						</tr>
						<tr>
							<td class="tit">支付方式</td>
							<td>
								<a-select style="width:100%" optionFilterProp="label" :options="options" allow-clear placeholder="请选择"
									v-model:value="form.pay_type" />
							</td>
							<td class="tit">条码</td>
							<td>
								<a-input allow-clear placeholder="请输入" v-model:value="form.bar_code"
									autocomplete="off" />
							</td>
						</tr>
					</table>
				</a-col>
			</a-row>
		</a-form>
	</ele-modal>
</template>

<script setup>
	import {
		ref,
		unref,
		reactive,
		onMounted,
		watch
	} from 'vue';
	import {
		Modal,
		message
	} from 'ant-design-vue';
	import {
		useRouter
	} from 'vue-router';
	import dayjs from 'dayjs';
	import { get_pay_type_select } from '@/api/setting/pay_type';
	import {
		salesman_list
	} from '@/api/order/order/jewelry_order';

	const emit = defineEmits(['update:visible', 'doSearch']);
	const props = defineProps({
		// 弹窗是否打开
		visible: Boolean
	});

	const loading = ref(false);
	const gouOptions = ref([]);
	
	const dateFormat = ref('YYYY-MM-DD');
	const getYMD = () => {
	  let myDate = new Date();
	  let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
	  let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
	  let myToday = myDate.getDate(); //获取当前日(1-31)
	  myMonth = myMonth > 9 ? myMonth : '0' + myMonth;
	  myToday = myToday > 9 ? myToday : '0' + myToday;
	  let nowDate = myYear + '-' + myMonth + '-' + myToday;
	  return nowDate;
	};
	const time = ref([
		dayjs(getYMD(), dateFormat.value),
		dayjs(getYMD(), dateFormat.value)
	]);

	const options = ref([/* {
			label: '现金',
			value: 'cash',
			isSelect: false
		},
		{
			label: '微信',
			value: 'wechat',
			isSelect: false
		},
		{
			label: '支付宝',
			value: 'alipay',
			isSelect: false
		},
		{
			label: '刷卡',
			value: 'card',
			isSelect: false
		},
		{
			label: '银行转账',
			value: 'transfer',
			isSelect: false
		} */
	]);
	const form = reactive({
		order_sn: '',
		sales_start_time: '2023-07-06',
		sales_end_time: '2023-07-06',
		main_salesman_id: null,
		vice_salesman_id: null,
		name: '',
		mobile: '',
		pay_type: null,
		bar_code: ''
	});

	onMounted(() => {
		get_pay_type_select().then((res) => {
		  res.forEach((item) => {
		    item.isSelect = false;
		  });
		  options.value = res;
		});
		salesman_list().then((res) => {
			gouOptions.value = res.data;
		});
	});
	
	const change = (date, dateString)=>{
		form.sales_start_time = dateString[0];
		form.sales_end_time = dateString[1];
	}

	const save = () => {
		emit('doSearch', form);
	};
	
	

	/* 更新visible */
	const updateVisible = (value) => {
		emit('update:visible', value);
	};
	defineExpose({});
</script>

<style lang="less" scoped>
	.pay_label {
		display: inline-block;
		min-width: 70px;
		text-align: right;
	}
</style>